/* src/assets/main.css */
/* 1. import base, components, utilities styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root,
:root.tw-light {
        /* light theme variables */
        --tw-page-bg: #FFFFFF;
        --tw-page-text: #1A1A1A;
        --tw-page-border: #E0E0E0;

        /* dark theme variables */
        --dark-bg: #121212;
        --dark-text: #E0E0E0;
        --dark-border: #333333;
}

:root.tw-dark {
        --tw-page-bg: var(--dark-bg);
        --tw-page-text: var(--dark-text);
        --tw-page-border: var(--dark-border);
}

@media (prefers-color-scheme: dark) {
        :root {
                --tw-page-bg: var(--dark-bg);
                --tw-page-text: var(--dark-text);
                --tw-page-border: var(--dark-border);
        }
}

html,
body {
        @apply tw-bg-[var(--tw-page-bg)] tw-text-[var(--tw-page-text)] tw-transition-colors tw-duration-300;
}

body {
        @apply tw-min-h-screen;
}

a {
        @apply tw-text-primary dark:tw-text-blue-400 hover:tw-underline;
}

.card {
        @apply tw-p-4 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-dark-card tw-border tw-border-[var(--tw-page-border)];
}

#app {
        gap: 10px;
}

@layer base {
        body {
                @apply tw-font-sans tw-bg-white dark:tw-bg-neutral-900 tw-text-neutral-800 dark:tw-text-neutral-100 tw-transition-colors tw-duration-300;
        }

        h1 {
                @apply tw-text-3xl tw-font-bold;
        }

        h2 {
                @apply tw-text-2xl tw-font-semibold;
        }
}

@layer utilities {
        .content-auto {
                content-visibility: auto;
        }

        .theme-transition {
                @apply tw-transition-colors tw-duration-300 tw-ease-in-out;
        }

        .toggle-transition {
                transition: all 0.3s ease;
        }
}